<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-select
          placeholder="主机"
          size="small"
          style="width: 200px"
          v-model="host"
          @change="changeHandler"
        >
          <el-option
            v-for="host in hostList"
            :key="host.host"
            :label="host.host"
            :value="host.host"
          />
        </el-select>
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="showJvmList"
        ></el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="jvmList">
      <el-table-column label="主机" prop="host" align="left" width="150" />
      <el-table-column label="进程编号" prop="pid" align="center" width="80" />
      <el-table-column label="启动参数" prop="params" align="center" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="jinfoHandler(scope.row)"
            >jinfo</el-button
          >
          <el-button size="mini" type="text" @click="jstatHandler(scope.row)"
            >jstat</el-button
          >
          <el-button size="mini" type="text" @click="jstackHandler(scope.row)"
            >jstack</el-button
          >
          <el-button size="mini" type="text" @click="jmapHandler(scope.row)"
            >jmap</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getNodeInfos, getJvmList, getDownCmdJvmInfoUrl } from "@/api/console";
export default {
  name: "host",
  data() {
    return {
      loading: false,
      hostList: [],
      host: "",
      jvmList: [],
    };
  },
  created() {
    this.showHostList();
  },
  methods: {
    showHostList() {
      this.loading = true;
      getNodeInfos()
        .then((res) => {
          this.hostList = res.data;
          this.loading = false;
          if (this.hostList.length > 0) {
            this.host = this.hostList[0].host;
            this.showJvmList();
          }
        })
        .catch((msg) => {
          this.loading = false;
        });
    },
    showJvmList() {
      if (!this.host) {
        return;
      }
      getJvmList(this.host)
        .then((res) => {
          this.jvmList = res.data;
        })
        .catch((msg) => {});
    },
    changeHandler() {
      this.showJvmList();
    },
    jinfoHandler(row) {
      this.downHandler(row, "jinfo");
    },
    jstatHandler(row) {
      this.downHandler(row, "jstat");
    },
    jstackHandler(row) {
      this.downHandler(row, "jstack");
    },
    jmapHandler(row) {
      this.downHandler(row, "jmap");
    },
    downHandler(row, type) {
      this.$confirm("是否确认执行?", "确定", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        let aLink = document.createElement("a");
        aLink.style.display = "none";
        aLink.href = getDownCmdJvmInfoUrl(row.host, type, row.pid);
        aLink.setAttribute("download", type); // 下载的文件
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink);
      });
    },
  },
};
</script>